<template>
	<view class="detail">
	<!-- 	<view class="introduce">
			<view></view>
			<view>教练介绍</view>
		</view>
		<view class="image_coach">
			<image src="../../../static/Mall/a2.jpg" mode=""></image>
		</view> -->
		<!-- <view class="text" v-if="coach[0]">
			<view>全国十佳明星教练</view>
			<view>武汉市体适能协会会长</view>
			<view>竞技健美操国家-级运动员</view>
			<view>2017年亚洲健美锦标赛冠军</view>
			<view>2016年全国健美健身公开赛冠军</view>
			<view>姓名:{{coach[0].coachName}}</view>
			<view>性别:{{coach[0].coachSex}}</view>
			<view>电话:{{coach[0].coachPhone}}</view>
			<view>教练经验:{{coach[0].workingtime}}</view>
			<view>教练简介:{{coach[0].coachIntro}}</view>
		</view> -->
		<view class="detail">
			<view class="introduce">
				<view></view>
				<view>教练介绍</view>
			</view>
			<view v-html="coach[0].coachText" v-if="coach[0]"></view>
			<view class="introduce">
				<view></view>
				<view>课程介绍</view>
			</view>
			<view v-html="resdata.classText"></view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import myRequest from '../../../utils/myRequest.js'
	export default {
		setup() {
			let data = reactive({
				coach:[],
				resdata:[],
				init() {
					myRequest({
						url: '/getcoach',
					}).then((res) => {
						let mycoach = res.data.data
						this.coach = mycoach.filter(function(x, index) {
							return x.coachName==data.resdata.courseCoach
						})
					})
				}
			});
			onLoad((option) => {
				data.resdata = JSON.parse(decodeURIComponent(option.data))
				data.init()
			})
			return data
		}
	}
</script>

<style>
	@import url('~@/static/font-li/font2022/iconfont.css');

	.detail {
		padding: 20rpx 20rpx 130rpx 20rpx;
	}
	
	.introduce {
		display: flex;
		align-items: center;
	}
	
	.introduce>view:first-child {
		height: 50rpx;
		width: 10rpx;
		background: #2979FF;
	}
	
	.introduce>view:last-child {
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
	
	.image_coach {
		margin-top: 10rpx;
	}
	
	.image_coach>.image {
		width: 400rpx;
		height: 300rpx;
	}
	
	.text {
		margin: 20rpx 0;
	}
	
	.text>.view {
		margin-top: 15rpx;
	}
	
	.couText {
		margin-top: 15rpx;
		line-height: 60rpx;
	}
	
	.couIntroduce>.view {
		line-height: 60rpx;
		padding: 0 50rpx 0 0;
	}
	
	.couIntroduce>.view:nth-of-type(1) {
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}
	
	.couIntroduce>.view:last-child {
		display: flex;
		justify-content: center;
	}
	
	.myImage {
		width: 300rpx;
		height: 300rpx;
		margin-top: 20rpx;
	}
</style>
